<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0">
    <title>餐饮店免费领取啤酒</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <script src="cafeFreeReceiveBeer.js"></script>
    <link type="text/css" href="cafeFreeReceiveBeer.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #pay{
            width: 100%;margin: 0 auto;height: 200px;
        }
        .receive{
            color: #ededed;width: 60%;margin:0 auto;
            text-align: center;border-radius: 5px;
            line-height: 40px;background: #fd303d;
        }
        .duanluo{
            width: 100%;text-align: center;
            height: 100px;
            margin-top: 20px;
        }
        #name{
            font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
        }
        #headPortrait{
            float: left;
        }
        #name{
            float: left;
            line-height: 60px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
<div style="text-align: center;height: 470px">
    <div style="width: 100%;height: 60px;margin-top: 10px;margin-left: 20px">
        <div style="width: 50%;height: 100%;float: left">
        <img id="headPortrait" src="./u515%5B1%5D.png" width="50" height="50" style="border-radius: 50%" alt="头像">
        <p id="name">昵称</p>
        </div>
    </div>
    <div class="duanluo">
        <img src="../image/android/drawable-hdpi/ic_beer_02.png" style="margin-top:10px " width="120" height="95" alt="">
    </div>
    <p style="margin-top: 50px;margin-bottom: 20px">餐饮店剩余可免费领取啤酒数：<span id="quantityBeerAvailable">20</span>罐</p>
    <div id="pay">
        <div class="receive" onclick="receive()">领酒</div>
    </div>
    <a href="./receive.html"></a>
</div>

</body>
</html>